<template>
  <el-form-item label="颜色">
    <el-color-picker v-model="state.activeData.color" />
  </el-form-item>
  <el-form-item label="尺寸">
    <el-input-number v-model="state.activeData['font-size']" placeholder="字符大小" :min="0" :max="32"> </el-input-number>
  </el-form-item>
  <el-form-item label="行高">
    <el-input-number v-model="state.activeData['line-height']" placeholder="行高" :min="0" :max="128"> </el-input-number>
  </el-form-item>
  <el-form-item label="静态文本">
    <el-input v-model="state.activeData._config_.defaultValue" />
  </el-form-item>
  <el-form-item label="是否加粗">
    <el-switch v-model="state.activeData.bold" />
  </el-form-item>
</template>
<script setup lang="ts" name="GoodText">
import { reactive, watch } from "vue";
const props = defineProps({
  activeData: {
    type: Object,
    default: null
  }
});
const state = reactive({
  activeData: {} as any
});
const propsData = toRef(props);
state.activeData = propsData.value.activeData;
const emits = defineEmits(["updateActiveData"]);
watch(
  () => state.activeData,
  val => {
    emits("updateActiveData", val);
  }
);
</script>
